<template>
    <div class="setting-page">
        <!-- 设置聊天框侧栏菜单的显示 -->
        <!-- <el-button @click="emits('child-click')">test</el-button> -->
        <!-- 循环菜单 -->
        <div class="collectivity-menus">
            <div class="items" v-for="(menu, menuIndex) in CollectivityMenu" :key="menuIndex">
                <!-- 菜单主题 -->
                <div id="title"><span>{{ translateMenu(menu.key) }}</span></div>
                <!-- 设置内容块 -->
                <keep-alive>
                    <component :is="getComponent(menu.key)" />
                </keep-alive>
            </div>
        </div>
    </div>
</template>



<script setup lang="ts">
import { computed, defineComponent } from 'vue';
import { CollectivityMenu } from './setting';
import { ElMessage } from 'element-plus';
import { component, getComponent } from "./setting"

defineComponent({
    name: "Setting-Page"
})


// 用户计算属性的键名
const translations = {
    'snow-user-set': "用户设置",
    "snow-chat-set": "聊天设置",
    "snow-music-set": "音乐设置",
    "snow-system-set": "系统设置",
    "snow-blog-set": "博客设置",
    "snow-space-set": "空间设置",
    "snow-collection-set": "收藏设置",
    "snow-about-file": "有关文件"
}
const translateMenu = (index: string): string => {
    return translations[index as keyof typeof translations];
}


const emits = defineEmits(['child-click']);



</script>


<style scoped lang="scss">
@import url("./setting.scss");
</style>